import React, { useEffect, useState } from 'react'
import { getHospitalListAsync, lockHospListAsync, upSearchData, useSelectorHosp } from '@/store/slice/hosp'
import { useAppDispatch } from '@/hooks'
import { Button, Form, Image, Input, Select, Space, Table } from 'antd'
import { useSelectPageCommon } from '@/store/slice/pageCommon'
import { useNavigate } from 'react-router-dom'
import { SearchOutlined } from '@ant-design/icons'
import { getDictByParentId } from '@/api/dict'

function HospitalList() {
    const dispatch = useAppDispatch()
    const navigate = useNavigate()
    const { hospitalList, hospDetail } = useSelectorHosp()
    const { pageInfo } = useSelectPageCommon()
    const [form] = Form.useForm()

    // 定义医院类型列表
    const [hospTypeList, setHospTypeList] = useState([])

    // 定义省份列表
    const [provinceCodeList, setProvinceCodeList] = useState([])
    // 定义城市列表
    const [cityCodeList, setCityCodeList] = useState([])
    // 定义区列表
    const [districtCodeList, setDistrictCodeList] = useState([])

    useEffect(() => {
        dispatch(getHospitalListAsync(pageInfo.current, pageInfo.pageSize))

        // 找到医院类型
        getDictByParentId(10000).then((value) => {
            // console.log(value);
            setHospTypeList(value.data)
        })

        // 找到省份列表
        getDictByParentId(86).then((value) => {
            // console.log(value)
            setProvinceCodeList(value.data)
        })

        return () => {
            dispatch(upSearchData({})) // 清空搜索条件,解决切换路由时,搜索条件还存在的问题
        }
    }, [])
    return (
        <div>
            <div style={{ marginBottom: '16px' }}>
                <Form
                    form={form}
                    name="basic"
                    initialValues={{ remember: true }}
                    onFinish={async () => {
                        dispatch(upSearchData(form.getFieldsValue())) // 将搜索条件保存到redux中
                        await dispatch(getHospitalListAsync(1, 5))
                    }}
                    autoComplete="off"
                    layout="inline" // 表单布局
                >
                    <Space>
                        <Form.Item name={'provinceCode'}>
                            <Select
                                placeholder={'请选择省'}
                                style={{ width: 160 }}
                                onChange={(value) => {
                                    getDictByParentId(value).then((res) => {
                                        form.setFieldsValue({
                                            cityCode: undefined,
                                            districtCode: undefined
                                        })
                                        setCityCodeList(res.data)
                                        setDistrictCodeList([])
                                    })
                                }}
                            >
                                {provinceCodeList.map((item: any) => (
                                    <Select.Option key={item.id} value={item.value}>
                                        {item.name}
                                    </Select.Option>
                                ))}
                            </Select>
                        </Form.Item>
                        <Form.Item name={'cityCode'}>
                            <Select
                                placeholder={'请选择市'}
                                style={{ width: 160 }}
                                onChange={(value) => {
                                    getDictByParentId(value).then((res) => {
                                        form.setFieldsValue({
                                            districtCode: undefined
                                        })
                                        setDistrictCodeList(res.data)
                                    })
                                }}
                            >
                                {cityCodeList.map((item: any) => (
                                    <Select.Option key={item.id} value={item.value}>
                                        {item.name}
                                    </Select.Option>
                                ))}
                            </Select>
                        </Form.Item>
                        <Form.Item name={'districtCode'}>
                            <Select placeholder={'请选择区'} style={{ width: 160 }}>
                                {districtCodeList.map((item: any) => (
                                    <Select.Option key={item.id} value={item.value}>
                                        {item.name}
                                    </Select.Option>
                                ))}
                            </Select>
                        </Form.Item>
                        <Form.Item name="hosname" style={{ width: '160px' }}>
                            <Input placeholder={'请输入医院名称'} />
                        </Form.Item>
                        <Form.Item name="hoscode" style={{ width: '160px' }}>
                            <Input placeholder={'请输入医院编码'} />
                        </Form.Item>
                        <Form.Item name={'hostype'}>
                            <Select placeholder={'医院等级'} style={{ width: 160 }}>
                                {hospTypeList.map((item: any) => (
                                    <Select.Option key={item.id} value={item.value}>
                                        {item.name}
                                    </Select.Option>
                                ))}
                            </Select>
                        </Form.Item>
                        <Form.Item name={'status'}>
                            <Select placeholder={'医院状态'} style={{ width: 160 }}>
                                <Select.Option value={1}>已上线</Select.Option>
                                <Select.Option value={0}>未上线</Select.Option>
                            </Select>
                        </Form.Item>
                    </Space>

                    <Space style={{ marginTop: '16px' }}>
                        <Form.Item>
                            <Button icon={<SearchOutlined />} type="primary" htmlType="submit">
                                搜索
                            </Button>
                        </Form.Item>
                        <Form.Item>
                            <Button
                                onClick={() => {
                                    dispatch(upSearchData({}))
                                    dispatch(getHospitalListAsync(1, 5))
                                    form.resetFields() // 重置表单
                                }}
                            >
                                重置
                            </Button>
                        </Form.Item>
                    </Space>
                </Form>
            </div>
            <Table
                dataSource={hospitalList.content}
                rowKey={'id'}
                scroll={{ x: 1800 }}
                bordered={true}
                pagination={{
                    ...pageInfo,
                    // showQuickJumper: true, // 是否显示快速跳转
                    // showSizeChanger: true, // 是否显示 pageSize 切换器
                    showTotal: (total) => `共${total}条`, // 显示总条数
                    onChange: (page, pageSize) => {
                        dispatch(getHospitalListAsync(page, pageSize))
                    }
                }}
                columns={[
                    {
                        title: '序号',
                        width: 70,
                        align: 'center',
                        dataIndex: 'id',
                        render: (value, record, index) => {
                            return pageInfo.pageSize * (pageInfo.current - 1) + index + 1
                        }
                    },
                    {
                        title: '医院logo',
                        align: 'center',
                        width: 100,
                        render(record) {
                            return <Image src={`data:image/jpeg;base64,${record.logoData}`} alt={record.hosname} />
                        }
                    },
                    {
                        title: '医院名称',
                        width: 250,
                        align: 'center',
                        dataIndex: 'hosname'
                    },
                    {
                        title: '医院编号',
                        width: 150,
                        align: 'center',
                        dataIndex: 'hoscode'
                    },
                    {
                        title: '等级',
                        width: 120,
                        align: 'center',
                        render(record) {
                            return record.param.hostypeString
                        }
                    },
                    {
                        title: '详细地址',
                        align: 'center',
                        width: 250,
                        render(record) {
                            return record.param.fullAddress
                        }
                    },
                    {
                        title: '状态',
                        width: 120,
                        align: 'center',
                        dataIndex: 'status',
                        render(status) {
                            return status === 0 ? '未上线' : '已上线'
                        }
                    },
                    {
                        title: '创建时间',
                        align: 'center',
                        width: 200,
                        dataIndex: 'createTime'
                    },
                    {
                        title: '操作',
                        width: 250,
                        align: 'center',
                        fixed: 'right',
                        render(record) {
                            return (
                                <Space>
                                    <Button
                                        type="primary"
                                        onClick={() => {
                                            navigate(`/hospital/hospitalDetail/${record.id}`)
                                        }}
                                    >
                                        查看
                                    </Button>
                                    <Button
                                        type="primary"
                                        onClick={() => {
                                            navigate(`/hospital/department/${record.hoscode}`)
                                        }}
                                    >
                                        排班
                                    </Button>
                                    <Button
                                        type="primary"
                                        onClick={() => {
                                            // 上线状态
                                            dispatch(lockHospListAsync(record.id, record.status))
                                        }}
                                    >
                                        {record.status === 0 ? '上线' : '下线'}
                                    </Button>
                                </Space>
                            )
                        }
                    }
                ]}
            ></Table>
        </div>
    )
}

export default HospitalList
